<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // filter循环 ： 过滤循环； 
        // 在循环的同时可以过滤需要的数据；
        // var arr = [1, 2, 3, 4, 5];
        // var res = arr.map(function (item) {
        //     return item + 10;
        // })
        // console.log(res);

        // filter 获取返还值 和 回调里的返还值有关 ，如果 回调里返还true 那么就收集这个item
        // var res = arr.filter(function (item, key, arr) {
        //     // console.log(item,key,arr);
        //     return item>3;
        // })

        // console.log(res);


        var users = [{
            name: "张三",
            age: 21,
            gender: "女"
        }, {
            name: "张三2",
            age: 22,
            gender: "男"
        }, {
            name: "张三3",
            age: 19,
            gender: "男"
        }, {
            name: "张三4",
            age: 20,
            gender: "男"
        }, {
            name: "张三5",
            age: 21,
            gender: "男"
        }];
        // 需要获取到 所有年龄大于20岁的男性；
        // var res = users.filter(function (item) {
        //     return item.gender === "男" && item.age > 20;
        // })
        // console.log(res);


        // 链式操作 ： 年龄前加上 “年龄是：”  性别是男性的人员；

        // var res = users.map(function (item) {
        //     var obj = {
        //         name: item.name,
        //         age: "年龄是:" + item.age,
        //         gender: item.gender
        //     }
        //     return obj
        // })
        // // console.log(res);

        // var res2 = res.filter(function (item) {
        //     return item.gender === "男";
        // })
        // console.log(res2);


        // 链式操作 
        // pipe 管道
        var res2 = users.map(function (item) {
            var obj = {
                name: item.name,
                age: "年龄是:" + item.age,
                gender: item.gender
            }
            return obj
        }).filter(function (item) {
            return item.gender === "男";
        });
        console.log(res2);

        // 1.知识点 2.三个 防抖 节流 bind  3.实现一个自己的filter；

    </script>
</body>

</html>